<?php echo $this->render('/public/header'); ?>
    <link href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
    <div class="col-lg-12 col-md-12 col-sm-12" id="main">
        <el-form :inline="true">
            <el-form-item>
                <el-select v-model="name">
                    <el-option
                            v-for="item in staffList"
                            :key="item.job_number"
                            :label="item.name"
                            :value="item.job_number">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="begin_date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="开始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="end_date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-input v-model="invoice" placeholder="搜索invoice">
            </el-form-item>
            <el-button type="primary" @click="submit">搜索</el-button>
        </el-form>
        <el-table
                :data="list"
                style="width: 100%">
            <el-table-column
                    label="日期"
                    prop="date"
                    width="180">
                <template scope="scope">
                    <el-date-picker
                            style="width:100%"
                            v-model="scope.row.date"
                            type="date"
                            value-format="yyyy-MM-dd"
                            @change="v=>update(v,'date',scope.row.id)"
                            placeholder="选择日期">
                    </el-date-picker>
                </template>
            </el-table-column>
            <el-table-column
                    prop="product"
                    label="产品"
                    width="180">
                <template scope="scope">
                    <el-input v-model="scope.row.product" @change="v=>update(v,'product',scope.row.id)"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="业务员">
                <template scope="scope">
                    <el-select v-model="scope.row.name">
                        <el-option
                                v-for="item in staffList"
                                :key="item.job_number"
                                :label="item.name"
                                :value="item.job_number">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="数量">
                <template scope="scope">
                    <el-input v-model="scope.row.num" @change="v=>update(v,'num',scope.row.id)"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="单价">
                <template scope="scope">
                    <el-input v-model="scope.row.price" @change="v=>update(v,'price',scope.row.id)"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="fee"
                    label="费用">
                <template scope="scope">
                    <el-input v-model="scope.row.fee" @change="v=>update(v,'fee',scope.row.id)"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="invoice_order"
                    label="invoice">
                <template scope="scope">
                    <el-input v-model="scope.row.invoice_order"
                              @change="v=>update(v,'invoice_order',scope.row.id)"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注">
                <template scope="scope">
                    <el-input v-model="scope.row.remark" @change="v=>update(v,'remark',scope.row.id)"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="last_modify"
                    label="最后更新人">
                <template scope="scope">
                        <template v-for="item in staffList">
                        <template v-if="item.job_number==(scope.row.last_modify)">{{item.name}}</template>
                        </template>
                </template>
            </el-table-column>
            <el-table-column
                    prop="last_modify_time"
                    label="最后更新时间">
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
                    <el-button type="primary" size="mini" @click="lock(scope.row.id,scope.row.lock_status)">{{scope.row.lock_status==1?'解锁':'锁定'}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="current"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[15,30,100]"
                :page-size="pageSize"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    <script>
        new Vue({
            el: "#main",
            data: {
                invoice: '<?php echo yii::$app->request->get('invoice');?>',
                begin_date: '<?php echo yii::$app->request->get('begin_date');?>',
                end_date: '<?php echo yii::$app->request->get('end_date');?>',
                name: '<?php echo yii::$app->request->get('name');?>',
                list:<?php echo json_encode($this->params['list']);?>,
                staffList:<?php echo json_encode($this->params['staffList']);?>,
                current:<?php echo $this->params['curr'];?>,
                total:<?php echo $this->params['size'];?>,
                pageSize:<?php echo $this->params['s'];?>,
                page:<?php echo yii::$app->request->get('p') ? yii::$app->request->get('p') : 1?>
            },
            methods: {
                submit: function () {
                    var url = '/table/print?begin_date=' + this.begin_date + '&end_date=' + this.end_date
                        + '&invoice=' + this.invoice
                        + '&name=' + this.name
                        + '&p=' + this.page
                        + '&s=' + this.pageSize;
                    window.location.href = url;
                },

                update(e, param, id) {
                    this.$confirm('确认修改').then(() => {
                        $.post('/table/update-print', {param: param, id: id, value: e}, res => {
                            if (res.code == 1) {
                                this.$message.success(res.msg);
                            } else {
                                this.$message.error(res.msg);
                            }
                        }, 'json')
                    })
                },
                handleSizeChange: function (v) {
                    this.pageSize = v;
                },
                handleCurrentChange: function (v) {
                    this.page=v;
                    this.submit();
                },
                del:function(id){
                    this.$confirm('确认删除').then(()=>{
                        $.post('/table/del-print',{id:id},res=>{
                            if (res.code == 1) {
                                this.$message.success(res.msg);
                                setTimeout(function(){
                                    window.location.reload()
                                },1000);
                            } else {
                                this.$message.error(res.msg);
                            }
                        },'json')
                    })
                },
                lock:function(id,lock_status) {
                    const content = lock_status==1?'确认解锁':'确认锁定';
                    let data = {};
                    data.id = id;
                    data.param = 'lock_status';
                    data.value = lock_status==1?2:1;
                    this.$confirm(content).then(()=>{
                        $.post('/table/lock-print',data,res=>{
                            if (res.code == 1) {
                                this.$message.success(res.msg);
                                setTimeout(function(){
                                    window.location.reload()
                                },1000);
                            } else {
                                this.$message.error(res.msg);
                            }
                        },'json')
                    })
                }
            }
        })
    </script>
<?php echo $this->render('/public/footer'); ?>